<template>
	<view class="charging-page">
		
		<!-- 充电桩列表 -->
		<scroll-view
			class="charging-scroll-list"
			scroll-x
			show-scrollbar="false"
		>
			<!-- 卡片列表 -->
			<view
				v-for="(item, idx) in chargingList"
				:key="item.id"
				:class="['charging-card', {active: chargingInfo && chargingInfo.id === item.id}]"
				 @click="selectTerminal(item)"
			>
				<view class="card-header">编号：{{ item.terminalId || item.id }}</view>
				<view class="card-title">{{ item.terminalName || '充电桩名称' }}</view>
				<view class="card-actions" style="margin-top: 20rpx;">
					<button v-if="chargingInfo && chargingInfo.id === item.id" class="unbind-btn" @click="unbind(item)">解绑</button>
					<template v-else>
						<button class="switch-btn">切换</button>
						<button class="unbind-btn" @click="unbind(item)">解绑</button>
					</template>
				</view>
			</view>
			<!-- 新增卡片 -->
			<view class="charging-card">
				<view class="flex" style="justify-content: center;height: 100%;">
					<button class="bind-btn" @click="addCharging = true">绑定</button>
				</view>
			</view>
		</scroll-view>
		
		<!-- 终端列表不为空且有选中终端，显示原有内容 -->
		<view class="header" v-if="chargingInfo">
			<!-- 顶部状态提示 -->
			<!-- <view class="status-tip">这是充电桩位置这是充电桩位置</view> -->
			
			<!-- 充电状态圆环 -->
			<view class="charging-status">
				<view class="circle-progress flex">
					<view class="percentage flex">
						<view class="light flex">
							<image class="lightning" src="@/static/mine/charging/light.png" mode="aspectFill"></image>
							<text class="process">{{ chargingInfo.soc || 0 }}%</text>
						</view>
						<view class="icons">
							<image class="icon" src="@/static/mine/charging/lanya.png" mode="aspectFit"></image>
							<image class="icon" src="@/static/mine/charging/xinhao.png" mode="aspectFit"></image>
						</view>
					</view>
					<image class="car-charging" src="@/static/mine/charging/car.png" mode="aspectFill"></image>
				</view>
				<view class="connection-status">{{ pileStatusText[chargingInfo.pileStatus] || '' }}</view>
				<view class="update-time">更新于:{{ chargingInfo.updateTime | formatTime }}</view>
			</view>
			
			<!-- 选中终端后 -->
			<view class="charging-data">
				<view class="data-item">
					<view class="value">{{ chargingInfo.pileCurrent || 0 }}A</view>
					<view class="label">实时电流</view>
				</view>
				<view class="data-item">
					<view class="value">{{ chargingInfo.voltage || 0 }}V</view>
					<view class="label">实时电压</view>
				</view>
				<view class="data-item">
					<view class="value">{{ chargingInfo.chargedEnergy || 0 }}度</view>
					<view class="label">已充电量</view>
				</view>
			</view>
			
			<!-- 警告提示 -->
			<view class="warning-tip" v-if="[2, 3].includes(chargingInfo.pileStatus)">
				提示:请等待充电结束后再拔枪，结束过程中请勿拔枪，否则可能异常锁枪
			</view>
		</view>
		
		<view class="header" v-else>
			<!-- 顶部状态提示 -->
			<view class="status-tip">这是充电桩位置这是充电桩位置</view>
			
			<!-- 充电状态圆环 -->
			<view class="charging-status">
				<view class="circle-progress flex">
					<view class="percentage flex">
						<view class="light flex">
							<image class="lightning" src="@/static/mine/charging/light.png" mode="aspectFill"></image>
							<text class="process">0%</text>
						</view>
						<view class="icons">
							<image class="icon" src="@/static/mine/charging/lanya.png" mode="aspectFit"></image>
							<image class="icon" src="@/static/mine/charging/xinhao.png" mode="aspectFit"></image>
						</view>
					</view>
					<image class="car-charging" src="@/static/mine/charging/car.png" mode="aspectFill"></image>
				</view>
				<view class="connection-status">未连接</view>
				<view class="update-time">请选择充电桩</view>
			</view>
		</view>

		<template v-if="chargingInfo">
			<!-- 预约充电开关 -->
			<view class="appointment-charging">
				<view class="appointment-text flex">
					<view class="title">预约充电</view>
					<u-switch v-model="isAppointment" size="20" inactiveColor="#E7F2FF" activeColor="#42E0A3" />
				</view>
				
				<!-- 开始充电 -->
				<block v-if="isAppointment">
					<view class="charging flex" @click="toCharging">
						<view class="item flex flex-column">
							<view class="flex">
								<image class="icon" src="@/static/mine/charging/start.png" mode="aspectFill"></image>
								<text class="label">开始充电</text>
							</view>
							<view style="padding: 10rpx 0;"><text class="value">{{ scheduleInfo.startAt | formatTime2 }}</text></view>
						</view>
						
						<view class="item flex flex-column">
							<view class="flex">
								<image class="icon" src="@/static/mine/charging/stop.png" mode="aspectFill"></image>
								<text class="label">结束充电</text>
							</view>
							<view style="padding: 10rpx 0;">
								<text class="value" v-if="scheduleInfo.autoStop == 1">充满自停</text>
								<text class="value" v-else>{{ scheduleInfo.stopAt | formatTime2 }}</text>
							</view>
						</view>
					</view>
					
					<view class="timer-title">每天</view>
					<view class="desc">提前设置交流电枪，将在设定的时间段内充电</view>
				</block>
				
				<view v-else class="desc">设置充电起止时间段，连接交流充电枪定时充电</view>
			</view>
			
			<!-- 操作按钮组 -->
			<view class="action-buttons">
				<block v-if="chargingInfo.pileStatus == 1">
					<view class="action-item" @click=""><button class="start-charging">立即充电</button></view>
					<view class="action-item" @click=""><button class="plug-charging">即插即充</button></view>
				</block>
				<view v-if="[2, 3].includes(chargingInfo.pileStatus)"><button class="end-charging">结束充电</button></view>
			</view>
		</template>

		<!-- 终端列表为空或未选中终端，显示添加终端UI -->
		<template v-if="addCharging">
			<view class="add-terminal-card">
				<view class="add-title">填写终端</view>
				<view class="add-form">
					<view class="add-form-item">
						<text>终端名称</text>
						<input v-model="formData.terminalName" placeholder="请输入" />
					</view>
					<view class="add-form-item">
						<text>终端编号</text>
						<input v-model="formData.terminalId" placeholder="请输入" />
					</view>
					<view class="add-form-item">
						<text>枪号</text>
						<input v-model="formData.gunCode" placeholder="请输入" />
					</view>
					<view class="add-form-item">
						<text>功率</text>
						<input v-model="formData.power" placeholder="请输入" />
					</view>
					<view class="add-form-item">
						<text>电压</text>
						<input v-model="formData.voltage" placeholder="请输入" />
					</view>
					<view class="add-form-item">
						<text>电流</text>
						<input v-model="formData.pileCurrent" placeholder="请输入" />
					</view>
				</view>
				<button class="add-btn" @tap="saveTerminal">确认连接</button>
			</view>
		</template>
	</view>
</template>

<script>
	import { formatTimestamp } from '@/utils/index.js'
	export default {
		name: 'ChargingPage',
		data() {
			return {
				isAppointment: false,
				chargingList: [], // 终端列表
				chargingInfo: null, // 当前选中的终端
				formData: {
					terminalName: '',
					terminalId: '',
					gunCode: '',
					power: 0,
					voltage: 0,
					pileCurrent: 0
				},
				addCharging: false,
				pileStatusText: {
					0: '离线',
					1: '空闲',
					2: '已插枪',
					3: '即将充满'
				},
				scheduleInfo: null, // 预约充电记录
			}
		},
		onLoad() {
			this.getDetail();
		},
		methods: {
			getDetail() {
				this.$http_api.getMinePile({}).then(res => {
					this.chargingList = res.list;
				})
			},
			
			// 新增终端
			saveTerminal() {
				this.$http_api.createMinePile(this.formData).then(res => {
					this.addCharging = false;
					uni.$u.toast('添加成功');
					this.getDetail();
				})
			},
			
			toCharging() {
				const { terminalId, gunCode } = this.chargingInfo
				uni.navigateTo({
					url: '/pages/user/users/charging/appointment?terminalId=' + terminalId + '&gunCode=' + gunCode
				})
			},
			selectTerminal(item) {
				this.addCharging = false;
				this.$http_api.getMinePileDetail({ id: item.id }).then(res => {
					this.chargingInfo = res;
					// 获取预约充电的信息
					this.getReservationInfo();
				})
			},
			getReservationInfo() {
				const { terminalId, gunCode } = this.chargingInfo;
				this.$http_api.pileScheduleDetail({ terminalId, gunCode }).then(res => {
					if (res && res.length > 0) {
						this.isAppointment = true;
						this.scheduleInfo = res[0];
					}
				})
			},
			addTerminal() {
				// 校验并提交表单，成功后刷新 chargingList
			},
			unbind(item) {
				// 解绑逻辑
			},
			showAddTerminal() {
				// 显示添加终端UI
				this.chargingInfo = null;
			}
		},
		filters: {
			formatTime(times) {
				const { date, time } = formatTimestamp(times);
				return date + ' ' + time
			},
			formatTime2(times) {
				const { date, time } = formatTimestamp(times);
				return time
			}
		}
	}
</script>

<style scoped lang="scss">
	.charging-page {
		padding: 20rpx;
		min-height: 100vh;
	}
	
	.header {
		background: #fff;
		border-radius: 28rpx;
		padding: 30rpx;
		
		.status-tip {
			color: #aaa;
			font-size: 21rpx;
			font-weight: 400;
			font-family: "PINGFANG";
			margin-bottom: 40rpx;
		}
		
		.charging-status {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-bottom: 60rpx;
		}
	}

	.circle-progress {
		width: 100%;
		height: 440rpx;
		position: relative;
		flex-direction: column;
		justify-content: center;
		
		background: url('~@/static/mine/charging/banyuan.png') no-repeat;
		background-size: 110% 105%;
		background-position: 60% 110%;
	}

	.percentage {
		color: #333;
		flex-direction: column;
		margin-top: 60rpx;
		position: absolute;
		z-index: 99;
		top: 0;
		
		.light {
			margin-bottom: 10rpx;
		}
		
		.lightning {
			color: #7BDEB5;
			width: 36rpx;
			height: 36rpx;
		}
		
		.process {
			font-size: 38rpx;
			color: #42E0A2;
			font-weight: 600;
			font-family: "PINGFANG";
		}
	}

	.icons {
		display: flex;
		gap: 16rpx;
		margin-left: 16rpx;
		
		.icon {
			width: 28rpx;
			height: 28rpx;
		}
	}

	.car-charging {
		width: calc(100% - 200rpx);
		height: 180rpx;
		border-radius: 100rpx 60rpx 0 0;
		margin: -30rpx 0 0 -60rpx;
	}

	.connection-status {
		font-size: 32rpx;
		color: #333;
		margin: -120rpx 0 10rpx 0;
	}

	.update-time {
		font-size: 24rpx;
		color: #999;
	}

	.charging-data {
		display: flex;
		justify-content: space-between;
		margin-bottom: 40rpx;
	}

	.data-item {
		text-align: center;
		flex: 1;
		position: relative;
		
		&:nth-child(2)::before, &:nth-child(2)::after {
			content: '';
			position: absolute;
			width: 2rpx;
			height: 50%;
			background: #eee;
			top: 25%;
		}
		
		&:nth-child(2)::before {
			left: 0;
		}
		
		&:nth-child(2)::after {
			right: 0;
		}
	}

	.data-item .value {
		font-family: "PINGFANG";
		font-size: 40rpx;
		color: #333;
		font-weight: 500;
		margin-bottom: 10rpx;
	}

	.data-item .label {
		font-family: "PINGFANG";
		font-size: 24rpx;
		color: #999;
	}

	.warning-tip {
		background: #FFEEE8;
		color: #FF4600;
		padding: 10rpx 20rpx;
		border-radius: 16rpx;
		font-size: 24rpx;
		text-align: left;
		margin: 40rpx 0 0 0;
		font-family: "PINGFANG";
		border: 1rpx solid #FF4600;
	}

	.appointment-charging {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
		background: #fff;
		margin: 20rpx 0 0 0;
		border-radius: 28rpx;
	}
	
	.appointment-text {
		width: 100%;
		justify-content: space-between;
		margin-bottom: 10rpx;
	}

	.appointment-text .title {
		font-size: 28rpx;
		color: #333;
		font-family: "PINGFANG";
		align-self: flex-start;
	}

	.appointment-charging .desc {
		font-size: 24rpx;
		color: #777;
		font-weight: 400;
		font-family: "PINGFANG";
		align-self: flex-start;
	}

	.action-buttons {
		display: flex;
		flex-direction: column;
		// gap: 30rpx;
		margin: 80rpx 0;
	}

	.action-buttons button {
		width: 90%;
		padding: 5rpx 10rpx;
		border: none;
		border-radius: 50rpx;
		font-size: 28rpx;
		color: white;
		cursor: pointer;
		font-family: "PINGFANG";
		
		&::after {
			border: none;
		}
	}
	
	.action-item {
		margin-bottom: 30rpx;
	}

	.start-charging {
		background: #7BDEB5;
	}

	.plug-charging {
		background: #4080FF;
	}

	.end-charging {
		background: #FF6B6B;
	}
	
	.charging {
		width: 100%;
		margin: 20rpx 0;
		
		.item {
			margin-right: 60rpx;
		}
		
		.icon {
			width: 26rpx;
			height: 26rpx;
			margin-right: 10rpx;
		}
		.label {
			font-weight: 400;
			font-size: 24rpx;
			font-family: "PINGFANG";
			color: #000000;
		}
		.value {
			font-family: "PINGFANG";
			font-weight: 600;
			font-size: 35rpx;
			color: #000000;
		}
	}
	
	.timer-title {
		font-family: "PINGFANG";
		font-size: 24rpx;
		font-weight: 400;
		color: #000000;
		width: 100%;
		margin-bottom: 5rpx;
	}

	.add-terminal-card {
		background: #fff;
		border-radius: 28rpx;
		padding: 30rpx;
		margin: 20rpx 0;
	}

	.add-title {
		font-size: 28rpx;
		color: #333;
		font-family: "PINGFANG";
		margin-bottom: 40rpx;
	}

	.add-form {
		margin-bottom: 40rpx;
	}

	.add-form-item {
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.add-form-item text {
		font-size: 28rpx;
		color: #333;
		font-family: "PINGFANG";
		margin-right: 10rpx;
		width: 130rpx;
	}

	.add-form-item input {
		flex: 2;
		padding: 10rpx;
		font-size: 28rpx;
		border-bottom: 1rpx solid #eee;
	}

	.add-btn {
		width: 100%;
		padding: 10rpx;
		border: none;
		border-radius: 50rpx;
		font-size: 28rpx;
		color: white;
		cursor: pointer;
		font-family: "PINGFANG";
		background: #7BDEB5;
		&::after {
			border: none;
		}
	}

	.charging-list {
		margin-top: 20rpx;
		display: flex;
		flex-direction: column;
		gap: 10rpx;
	}

	.terminal-item {
		padding: 10rpx;
		border: 1rpx solid #eee;
		border-radius: 10rpx;
		cursor: pointer;
		background: #fff;

		&.active {
			background: #E7F2FF;
		}
	}

	.charging-scroll-list {
		display: flex;
		flex-direction: row;
		width: 100%;
		white-space: nowrap;
		overflow-x: auto;
		padding-bottom: 20rpx;
	}

	.charging-card {
		display: inline-block;
		vertical-align: top;
		width: 300rpx;
		height: 200rpx;
		background: #fff;
		border-radius: 16rpx;
		box-shadow: 0 2rpx 8rpx #eee;
		margin-right: 20rpx;
		padding: 20rpx;
		box-sizing: border-box;
		border: 2rpx solid #eee;
		transition: border-color 0.2s, box-shadow 0.2s;

		&.active {
			border-color: #409eff;
			box-shadow: 0 2rpx 12rpx #b3d8ff;
		}
	}

	.card-header {
		font-size: 22rpx;
		color: #888;
		margin-bottom: 6rpx;
	}
	.card-title {
		font-size: 26rpx;
		font-weight: bold;
		color: #222;
		margin-bottom: 4rpx;
	}
	.card-desc {
		font-size: 20rpx;
		color: #aaa;
		margin-bottom: 16rpx;
		white-space: normal;
		word-break: break-all;
	}
	.card-actions {
		display: flex;
		gap: 10rpx;
	}
	.unbind-btn, .switch-btn, .bind-btn {
		background: #409eff;
		color: #fff;
		border: none;
		border-radius: 8rpx;
		padding: 0 24rpx;
		font-size: 22rpx;
		cursor: pointer;
	}
	.switch-btn {
		background: #67c23a;
	}
	.add-card {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 160rpx;
	}
</style>